<template>
<div class="PxOLPdiv1">
    <el-row class="OLrow0">
        <el-col :span="10" style="margin-left:15px">
            <div style="font-size:14px;font-weight:700">hggood自营</div>
            <div style="color:rgb(141,141,141);margin-top:3px">订单编号:{{MyOrderData[0].onum}}</div>
        </el-col>
        <el-col :span="13" >
                <div style="margin-top:10px;float:right;margin-right:10px;color:rgb(141,141,141);">
                    <!-- 测试专用 -->
                    <!-- <span style="margin-right:20px;color:rgb(101,101,101);" @click="GoOrderDetails()">订单详情</span> -->
                    <span style="margin-right:20px;color:rgb(101,101,101);" @click="GoOrderDetails(odata[0].oid)">订单详情</span>
                    <span :style="Status==0?'margin-right:10px':'margin-right:10px;color:rgb(91,91,91);'">
                        {{Status==0?cancel:notcancel}}</span></div>
        </el-col>
    </el-row>
    <el-row class="OLrow1"  type="flex" justify="center"
    v-for="(datalist,index) in MyOrderData" :key="index">
        <el-col :span="24" class="OLdiv1col1">
            <el-row class="OLrow2"  type="flex" justify="left">
                <img :src="imgshow[index]" class="PImg" @click="GoBackProductDetail(datalist.pid)">
                <div class="OLcol1div1" style="width: 150px;">
                    <span style="cursor:pointer;" @click="GoBackProductDetail(datalist.pid)"
                    >{{datalist.title}}</span>
                </div>
                <div class="OLcol1div11" style="margin-top:58px">
                    <span style="color: rgb(131, 131, 131);">标配：{{datalist.title.slice(2,15)}}</span>
                </div>
                <div class="OLcol1div12">
                    <div style="margin-top:18px">￥{{datalist.price}}</div>
                    <div style="margin-top:22px">×{{datalist.num}}</div>
                </div>
            </el-row>
        </el-col>
    </el-row>
    <el-row class="OLrow3" type="flex" justify="center" >
        <el-col :span="11">
            <span class="deletebtn" @click="DeleteByOid(odata[0].oid)">删除订单</span>
        </el-col>
        <el-col :span="13">
            <span>共<strong>{{TotalNum}}</strong>件商品</span>
            <span style="margin-left:20px"><strong>应付 ￥{{TotalPrice}}</strong></span>
        </el-col>
    </el-row>
</div>
</template>

<script>
import axios from 'axios'
export default {
    name:'PxOLProduct',
    props:{
        odata:[{'image':'','oid':9999},{'image':'','oid':9999}]
    },
    data(){
        return{
            DetailsStyle:'',
            DeleteStyle:'',
            MyOrderData:[{'onum':'999','title':'nothing'}],
            imgshow:[],
            weizhi:'',
            weizhi2:'',
            TotalPrice:'',
            TotalNum:0,
            Status:99,
            cancel:'已取消订单',
            notcancel:'已支付订单',
        }
    },
    methods:{
        GoBackProductDetail(pid){
            this.$router.push({
                name:'PxProductDetails', 
                params:{id:pid}})
        },
        GoOrderDetails(oid){
            this.$router.push({
                name:'PxOrderDetails',
                params:{oid:oid}})
        },
        DeleteByOid(oid){
            this.$confirm('此操作将永久删除该订单信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
            this.$addr.get(`orders/${oid}/delete`).then(
                response=>{
                    console.log('请求删除订单信息成功',response)
                    this.$router.push({name:'PxOLProgress'})
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                },
                error=>{
                    console.log('请求删除订单信息失败',error.message)
                }
            )
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },

    },
    mounted(){
        setTimeout(() => {
            this.MyOrderData=this.odata
            console.log(this.MyOrderData,'&&&&datalist');
            for( let i=0 ; i<this.MyOrderData.length ; i++){
                this.imgshow[i]=require(`../../../assets/${this.MyOrderData[i].image.slice(13)}1.jpg`)
                this.TotalNum+=this.MyOrderData[i].num
            }
            this.TotalPrice=this.odata[0].totalPrice
            this.Status=this.odata[0].status
        }, 250);

    },
}
</script>

<style scoped>
.PxOLPdiv1{
    border-bottom: 1px solid rgb(221, 221, 221);
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
}
.OLrow0{
    margin: 0px auto;
    max-width: 1000px;
    font-size: 12px;
    height: 100%;
    margin-top: 20px;
    padding-top: 10px;
}
.OLrow3{
    margin-top: 10px;
    height: 30px;
    font-size: 13px;
    padding-bottom: 35px;
    border-bottom: 1px solid rgb(221, 221, 221);
}
.OLrow2{
    height: 92px;
    /* border-bottom: 1px solid rgb(221, 221, 221); */
}
.OLrow1{
    margin: 0px auto;
    max-width: 1000px;
    text-align: center;
    font-size: 12px;
    height: 100%;
    
}
.PImg{
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    width: 70px;
    height: 70px;
    cursor: pointer;
}
.OLcol1div1{
    margin-left: 82px;
    margin-top: 12px;
    position: absolute;
    overflow: hidden;
    /* white-space: nowrap; 溢出不换行*/
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.OLcol1div11{
    width: 150px;
    margin-left: 87px;
    margin-top: 18px;
    position: absolute;
    overflow: hidden;
    white-space: nowrap; 
    text-overflow: ellipsis;
}
.OLcol1div12{
    margin-left: 220px;
    text-align: right;
}
.deletebtn{
    border-radius: 10px;
    padding: 8px;
    padding-bottom: 4px;
    padding-top: 4px;
    border: 1px solid rgb(0, 0, 0);
    margin-left: 20px;
}
</style>